<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<html>
<head>
    <title>百度在线考试平台</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <script src="/bootstrap/js/jquery.min.js"></script>
    <script>
        //选择题和判断题拼接的字符串
        $(function () {
            $("input[type='radio']").click(function () {
                var currval=$(this).attr("alt")+"-"+ $(this).val()+"#";
                var sss=$("#result").val();
                var index=sss.indexOf($(this).attr("alt")+"-");
                if(index!=-1){//找到
                    var subStr=sss.substring(index);
                    var sub=subStr.substring(0,subStr.indexOf("#")+1);
                    sss=sss.replace(sub,currval);
                }else{//不包含
                    sss=sss+currval;
                }
                $("#result").val(sss);
            });
            //多选题字符串拼接
            $("input[type='checkbox']").click(function () {
                var ids="";
                $(this).parent().parent().parent().find("input[type='checkbox']").each(function(i,obj){
                    if($(obj).prop("checked")){
                        ids+=$(obj).val()+",";
                    }
                });
                var currval=$(this).attr("alt")+"-"+ ids+"#";
                var sss=$("#result2").val();
                var index=sss.indexOf($(this).attr("alt")+"-");
                if(index!=-1){//找到
                    var subStr=sss.substring(index);//4-5,#10-18,#11-22#
                    var sub=subStr.substring(0,subStr.indexOf("#")+1);
                    sss=sss.replace(sub,currval);
                }else{//不包含
                    sss=sss+currval;
                }
                $("#result2").val(sss);
            });
        })
    </script>
</head>
<body>

<div class="container">
    <div class="panel panel-success">
        <div class="panel-heading panel-title">
            <h1>${radioList[0].title}试题</h1>
        </div>
        <form action="/exam/end" method="post">
        <div class="panel-body">
            <c:if test="${radioList[0].type==1}">
                <h3>单选题</h3><h5>(共${radioList[0].radioCount}题，每道题${radioList[0].radioScore}分)</h5>
                <c:forEach var="question" items="${radioList}" varStatus="status">
                    <div class="panel panel-default">
                        <div class="panel-heading panel-title">
                            第${status.index + 1}题：${question.questionTitle}
                        </div>
                        <div class="panel-body col-lg-offset-1" id="${question.qId}">
                            <c:forEach var="answer" items="${question.answerList}" varStatus="status">
                                <div class="item">
                                    <div class="radio">
                                        <input name="answer${question.qId}" alt="${question.qId}" value="${answer.answerId}" type="radio" >
                                        <label for="">${answer.context}</label>
                                    </div>
                                </div>
                            </c:forEach>
                        </div>
                    </div>
                </c:forEach>
            </c:if>
            <%--隐藏域--%>
            <input type="hidden" name="pId" value="${pid}">
            <input type="hidden" id="result" name="questionIds" value=""/>
            <input type="hidden" id="result2" name="answerIds" value=""/>
            <c:if test="${checkList[0].type==2}">
            <h3>多选题</h3><h5>(共${checkList[0].checkCount}题，每道题${checkList[0].checkScore}分)</h5>
                <c:forEach var="question" items="${checkList}" varStatus="status">
                    <div class="panel panel-default">
                        <div class="panel-heading panel-title">
                            第${status.index + 1}题：${question.questionTitle}
                        </div>
                        <div class="panel-body col-lg-offset-1" id="${question.qId}">
                            <c:forEach var="answer" items="${question.answerList}" varStatus="status">
                                <div class="item">
                                    <div class="radio">
                                        <input name="answer${question.qId}" alt="${question.qId}" value="${answer.answerId}" type="checkbox" >
                                        <label for="">${answer.context}</label>
                                    </div>
                                </div>
                            </c:forEach>
                        </div>
                    </div>
                </c:forEach>
            </c:if>
            <c:if test="${judgeList[0].type==3}">
            <h3>判断题</h3><h5>(共${judgeList[0].judgeCount}题，每道题${judgeList[0].judgeScore}分)</h5>
                <c:forEach var="question" items="${judgeList}" varStatus="status">
                    <div class="panel panel-default">
                        <div class="panel-heading panel-title">
                            第${status.index + 1}题：${question.questionTitle}
                        </div>
                        <div class="panel-body col-lg-offset-1" id="${question.qId}">
                            <div class="item">
                                <div class="radio">
                                    <input name="answer${question.qId}" value="1" alt="${question.qId}" type="radio" >                                            <label for="">${answer.context}</label>
                                </div>
                                <label for="">对</label>
                            </div>
                            <div class="item">
                                <div class="radio">
                                    <input name="answer${question.qId}" value="0" alt="${question.qId}" type="radio" >                                            <label for="">${answer.context}</label>
                                </div>
                                <label for="">错</label>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </c:if>
        </div>
        <div class="form-group ">
            <button type="submit" class="btn btn-success col-lg-offset-3" style="margin-left: 200px;">提交</button>
        </div>
        </form>
        <div class="panel-footer text-right">
            百度在线考试平台
        </div>
    </div>
</div>
</body>
</html>
